<template>
	<view class="my-count">

		<view class="form-box">
			<u-form labelPosition="left" :model="form" ref="uForm" labelWidth="0">
				<u-form-item prop="phone" ref="phone">
					<view class="form-item">
						<text class="text-title">手机号</text>
						<u--input  border="false" class="input-class" v-model="form.phone" placeholder="请输入手机号"
							type="number" clearable></u--input>
					</view>
					<button class="text-code" @click="getCode">{{code}}</button>
				</u-form-item>
				<u-form-item prop="code" ref="code">
					<view class="form-item">
						<text class="text-title">验证码</text>
						<u--input border="false" class="input-class" v-model="form.code" placeholder="请输入验证码"
							type="number" clearable></u--input>
					</view>
				</u-form-item>
				<u-form-item prop="password" ref="password">
					<view class="form-item">
						<text class="text-title">新密码</text>
						<u--input :maxlength="isPay? 6:18" border="false" class="input-class" v-model="form.password" placeholder="请输入新的密码"
							type="password" clearable></u--input>
					</view>
				</u-form-item>
				<u-form-item prop="repassword" ref="repassword">
					<view class="form-item">
						<text class="text-title">确认密码</text>
						<u--input :maxlength="isPay? 6:18" border="false" class="input-class" v-model="form.repassword" placeholder="请再次输入新密码"
							type="password" clearable></u--input>
					</view>
				</u-form-item>
				<text class="tip">密码不能少于6个字符</text>
				<text class="blue-btn" @click="$u.debounce(submit, 500)"
					style="width: 636rpx; display: block; margin: 265rpx 32rpx 0 32rpx;">完成</text>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		updatePassword,
		doRegister,
		messageVerification,
		login,
		forgetPayPassword
	} from "@/common/api/user.js"
	import {
		setUserInfo,
		getUserInfo,
		setLogin,
		getUserOpenid
	} from "@/utils/storage.js"
	import {getToken} from '@/utils/token.js'
	export default {
		data() {
			return {
				form: {
					phone:getToken('userInfo')['phone'],
					password: '',
					repassword: '',
					code: '',
					acUse:getToken('useNum')
				},
				
				rules: {
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}],
					repassword: [{
						required: true,
						message: '请输入确认',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return String(this.form.repassword) == String(this.form.password);
						},
						message: '确认密码与密码不一致',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					code: [{
							required: true,
							message: '请输入验证码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['blur', 'change']
						}
					],
					// 手机号
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				count: 60,
				code: '获取验证码',
				userCode: '', //用户自己填写的验证码
				
				isPay:false ,//判断是否时修改支付密码
				userNo:''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad:function(option){
			if(option.type == 'pay'){
				this.isPay = true
			}
			this.form.phone = getToken('account')
			this.userNo = getToken('account')
			
		},
		methods: {
			tourl() {
				uni.redirectTo({
					url: './login'
				})
			},
			// 生成随机数字
			randomNum(num) {
				let numStr = ""
				for (let i = 0; i < num; i++) {
					numStr += Math.floor(Math.random() * 10);
				}
				return numStr
			},
			//获取验证码
			getCode() {
				var that = this
				let Num = "";
				if (this.$u.test.mobile(this.form.phone)) { //用户填写了格式正确的手机号
					if (this.code !== '获取验证码') {
						return
					}
					//2.开启定时器
					this.countDown = setInterval(() => {
						if (this.count <= 0) {
							this.count = 60
							this.code = '获取验证码'
							clearInterval(this.countDown)
							return
						}
						this.count--
						this.code = this.count < 10 ? `请等待0${this.count}s` : `请等待${this.count}s`

					}, 1000);
					//3.生成手机验证码
					messageVerification({userNo: this.form.phone}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title:'发送成功',
								icon:'none'
							})
						}else{
							clearInterval(this.countDown)
							this.code = '获取验证码'
							this.count = 60
							uni.showToast({
								title: '获取验证码失败',
								icon: 'none'
							})
							
						}
					})

				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				}
			},
			subChange(params){
				//  生成十一个随机数字
				updatePassword(params).then(res => {
					uni.hideLoading()
					const {
						data
					} = res
					if (data.code === 1) {
						uni.showToast({
							title: res.data.msg || res.data.message || '请求出错',
							icon: 'none',
							mask: true,
							duration: 2000
						});
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						let params2 = {
							craftsmanFrom: 1,
							internetType: 3
						};
						params2.username = this.$md5(this.form.phone);
						params2.password = this.$md5(this.form.password);
						if(getUserOpenid()){
							params2.wxId = getUserOpenid()
						}
						getToken('assoId') ? params2['modleName'] = getToken('modleName') : params2['modleName'] = 'mingpian'
						login(params2).then(res => {
							uni.hideLoading()
							const {
								data
							} = res
							if (data.code === 1) {
								uni.showToast({
									title: res.data.msg || res.data.message || '请求出错',
									icon: 'none',
									mask: true,
									duration: 2000
								});
								setLogin(data)
							} else {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: res.data.msg || res.data.message || '请求出错',
									duration: 2000
								});
							}
						}).catch(err => {
							uni.hideLoading()
						})
					} else {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: res.data.msg || res.data.message || '请求出错',
							duration: 2000
						});
					}
				})
				
			},
				
			changePay(param){
				forgetPayPassword(param).then(res=>{
					const {
						data
					} = res
					if (data.code === 1) {
						uni.showToast({
							title: res.data.msg || res.data.message || '请求出错',
							icon: 'none',
							mask: true,
							duration: 1000
						});
						setTimeout(()=>{
							uni.navigateBack({})
						},1000)
					} else {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: res.data.msg || res.data.message || '请求出错',
							duration: 1000
						});
					}
				})
			},
			submit() {
				if(this.isPay && isNaN(this.form.password)){
					this.$u.toast('密码必须是全数字')
					return
				}
				this.$refs.uForm.validate().then(res => {
					if (res) {
						uni.showLoading({
							title: '提交中',
							mask: true
						})
						let params = {
							code: this.form.code,
							newPassWord: this.form.password
						}
					
						if(!this.isPay){
							params.usrTel = this.form.phone;
							this.subChange(params);
						}else{
							params.craftsmanId = getUserInfo()['craftsmanId'];
							this.changePay(params);
						}
					
					}
				})
			
			}
		}
	}
</script>

<style scoped>
	.blue-btn {
		text-align: center;
		line-height: 100rpx;
	}

	.form-box {
		padding: 30rpx 24rpx 0 24rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.form-item {
		display: flex;
		align-items: center;
		height: 105rpx;
		line-height: 105rpx;
		width: 100%;
		border-bottom: 1rpx solid #E1E1E1;
	}

	.text-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #242424;
		display: block;
		width: 134rpx;
	}

	.input-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #242424;
		flex: 1;
	}

	.place-class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #A8A8A8;
	}

	.text-code {
		width: 150rpx;
		height: 70rpx;
		border: 1rpx solid #2C8CFF;
		border-radius: 10rpx;
		display: block;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #2C8CFF;
		position: absolute;
		right: 24rpx;

		/*消除button的默认样式*/
		/*这种写法是对所有的button标签同时生效*/
		margin: 0px;
		padding: 0px;
		/*自定义边框*/
		border: 0px;
		/*消除默认点击蓝色边框效果*/
		outline: none;
	}

	.tip {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #A8A8A8;
		display: block;
		margin-top: 30rpx;
	}

	/* 蓝色按钮 */
	.blue-btn {
		width: 702rpx;
		height: 92rpx;
		margin: 0 24rpx;
		background: #0080FF;
		border-radius: 46rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
